<template>
    <div class="subheadings">
        {{ title }}
    </div>
    <div class="assy">
        <SamplingPoint v-if="props.index==0" :resultData="dataList"/>
        <BuildPoint v-if="props.index==1" :resultData="dataList"/>
        <RiskPoint v-if="props.index==2" :resultData="dataList"/>
    </div>
</template>

<script setup>
import { getSurveyPointLocality,getHouseTypeCount,getDamagePointTypeCount} from '@/api/provincePreEvaluation';
import SamplingPoint from "./SamplingPoint"
import BuildPoint from "./BuildPoint"
import RiskPoint from "./RiskPoint"
const props = defineProps({
  index: Number,
  code:String,
  provinceName:String
})
const dataList = ref([])
const title = ref('');
watch(() => props.index, val => {
  if(val==0){
    title.value = `抽样调查点所在地区统计（${props.provinceName}）`;
    getData();
  }else if(val==1){
    title.value = `房屋建筑物结构类型统计（${props.provinceName}）`;
    getData2();
  }else if(val==2){
    title.value = `灾害风险点统计（${props.provinceName}）`;
    getData3();
  }
},{ deep: true, immediate: true });

// 获取页面数据
function getData() {
  getSurveyPointLocality({code:props.code}).then((res) => {
    dataList.value = res.data; //各省（直辖市）抽样调查点数量统计
  });
} 
function getData2() {
  getHouseTypeCount({code:props.code}).then((res) => {
    dataList.value = res.data; //房屋建筑物结构类型统计
  });
} 
function getData3() {
  getDamagePointTypeCount({code:props.code}).then((res) => {
    dataList.value = res.data; //各省（直辖市）抽样调查点数量统计
  });
} 
</script>
<style scoped lang="scss">
.subheadings{
    width: 450px;
    height: 105px;
    background-size: 100% 100%;
    background-image: url(/src/assets/images/common/bg_little_title.png);
    margin: 0 auto;
    color: #E4F5FF;
    font-size: 22px;
    font-family: Source Han Sans;
    font-weight: 500;
    line-height: 80px;
    text-align: left;
    box-sizing: border-box;
    padding-left: 40px;
    display: flex;
    justify-content: left;
}
.assy{
}
</style>